<template>
  <div>
    <Menu menuActive="/blog" />
    <div class="user_blog_bg"></div>
    <layout>
      <template v-slot:main>
        <el-row>
          <div class="user_blog_container">
            <div class="top_user_blog_info height_light_bgcolor">
              <div class="top_user_blog_info_left">
                <el-avatar :size="100" :src="proxy.$baseImgUrl + userBlogInfoData.data.avatar" />
                <template v-if="userBlogInfoData.data.userId !== userInfoState?.userId">
                  <el-button type="primary" :icon="Plus" round class="hidden-sm-and-up" style="margin-top:10px"
                    @click="handleClickFollow(0, userBlogInfoData.data.userId)" :loading="followBtnLoading"
                    v-if="userBlogInfoData.data.followType === 1">关注
                  </el-button>
                  <el-button round class="hidden-sm-and-up" @click="handleClickFollow(1, userBlogInfoData.data.userId)"
                    :loading="followBtnLoading" v-else-if="userBlogInfoData.data.followType === 0">已关注</el-button>
                  <el-button round class="hidden-sm-and-up" @click="handleClickFollow(1, userBlogInfoData.data.userId)"
                    :loading="followBtnLoading" v-else-if="userBlogInfoData.data.followType === 2">互相关注</el-button>
                </template>
              </div>
              <div class="top_user_blog_info_right">
                <div class="user_blog_info_focu_wrap">
                  <div class="user_blog_info_name">{{ userBlogInfoData.data.nickName }}</div>
                  <template v-if="userBlogInfoData.data.userId !== userInfoState?.userId">
                    <el-button type="primary" :icon="Plus" round class="hidden-xs-only"
                      @click="handleClickFollow(0, userBlogInfoData.data.userId)" :loading="followBtnLoading"
                      v-if="userBlogInfoData.data.followType === 1">关注</el-button>
                    <el-button round class="hidden-xs-only" @click="handleClickFollow(1, userBlogInfoData.data.userId)"
                      :loading="followBtnLoading" v-else-if="userBlogInfoData.data.followType === 0">已关注</el-button>
                    <el-button round class="hidden-xs-only" @click="handleClickFollow(1, userBlogInfoData.data.userId)"
                      :loading="followBtnLoading" v-else-if="userBlogInfoData.data.followType === 2">互相关注</el-button>
                  </template>
                </div>
                <div class="num_wrap">
                  <div class="num_item">
                    <span>{{ userBlogInfoData.data.fansNum }}</span> 粉丝
                  </div>
                  <!-- <div class="num_item">
                    <span>1,5796</span> 访问
                  </div> -->
                  <div class="num_item">
                    <span>{{ userBlogInfoData.data.followNum }}</span> 关注
                  </div>
                  <div class="num_item">
                    <span>{{ userBlogInfoData.data.likeNum }}</span> 点赞
                  </div>
                </div>
                <div class="hobby_wrap hidden-xs-only">
                  <span class="text_muted">兴趣领域：</span>
                  <template v-if="userBlogInfoData.data.interestValue">
                    <el-tag class="tag_item" type="info" v-for="item in userBlogInfoData.data.interestValue.split(',')"
                      :key="item">{{ item }}</el-tag>
                  </template>
                </div>

                <div class="user_blog_desc text_muted text_ellipsis2 hidden-xs-only">
                  个人简介：{{ userBlogInfoData.data.remark }}
                </div>
              </div>
            </div>
            <div class="bottom_user_blog_content height_light_bgcolor">
              <div class="tab_wrapper">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="博客" name="first">
                    <div class="tab_pane_wrapper" v-loading="blogLoading" element-loading-text="正在玩命加载中...">
                      <Article v-for="item in blogData.data.value" @liked="handleClickArticleLiked($event, item.name)"
                        :key="item.id" :id="item.id" :coverPicture="item.coverPicture" :title="item.title"
                        :description="item.description" :groups="item.groups" :likeNum="item.likeNum"
                        :nickName="item.user.nickName" :commentCount="item.commentCount" :pageViewNum="item.pageViewNum"
                        :createTime="item.createTime" :isLike="item.isLike" :directionId="item.directionId"></Article>
                      <el-empty description="暂无数据~" v-if="!blogLoading && blogData.total.value <= 0" />
                      <div class="pagination_container">
                        <el-pagination v-model:current-page="blogSearchParams.pageNum"
                          v-model:page-size="blogSearchParams.pageSize" background
                          layout="total, prev, pager, next, jumper" :total="blogData.total.value"
                          v-if="blogData.total.value > 0" @current-change="handleCurrentChange($event, 1)" />
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="资源" name="second">
                    <div class="tab_pane_wrapper">
                      <File v-for="item in resourceData.data.value" :key="item.id" :title="item.title"
                        :format="item.format" :description="item.description" :id="item.id"
                        :createTime="item.createTime" />
                      <el-empty description="暂无数据~" v-if="!resourceLoading && resourceData.total.value <= 0" />
                      <div class="pagination_container">
                        <el-pagination v-model:current-page="resourceSearchParams.pageNum"
                          v-model:page-size="resourceSearchParams.pageSize" background
                          layout="total, prev, pager, next, jumper" :total="resourceData.total.value"
                          v-if="resourceData.total.value > 0" @current-change="handleCurrentChange($event, 2)" />
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="问答" name="third">
                    <div class="tab_pane_wrapper">
                      <Question v-for="item in faqData.data.value" :key="item.id" :title="item.title"
                        :desc="item.description" :id="item.id" :tags="item.tags" :num="item.answerNum"
                        :time="item.createTime" :view-number="item.pageViewNum" :author="item.user?.nickName" />
                      <el-empty description="暂无数据~" v-if="!faqLoading && faqData.total.value <= 0" />
                      <div class="pagination_container">
                        <el-pagination v-model:current-page="faqSearchParams.pageNum"
                          v-model:page-size="faqSearchParams.pageSize" background
                          layout="total, prev, pager, next, jumper" :total="faqData.total.value"
                          v-if="faqData.total.value > 0" @current-change="handleCurrentChange($event, 3)" />
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="粉丝" name="four">
                    <div class="tab_pane_wrapper" v-loading="fansLoading" element-loading-text="正在玩命加载中...">
                      <div class="sub_people_list">
                        <div class="sub_people_item" v-for="item in fansData.data.value" :key="item.userId">
                          <div style="display: flex;flex:1;overflow: hidden;align-items: center;">
                            <div class="sub_people_left">
                              <el-avatar :size="50" :src="proxy.$baseImgUrl + item.avatar" class="cursor_class"  @click="handleClickToDetail(item.userId)"/>
                            </div>
                            <div class="sub_people_right">
                              <p class="sub_people_name text_ellipsis cursor_class" @click="handleClickToDetail(item.userId)">{{ item.nickName }}</p>
                              <p class="sub_people_desc text_ellipsis hidden-xs-only">{{ item.remark }}</p>
                              <template v-if="item.followType === 0 && userInfoState?.userId !== item.userId">
                                <el-button round class="hidden-sm-and-up" @click="handleClickFollow(1, item.userId)"
                                  :loading="followBtnLoading">已关注</el-button>
                              </template>
                              <template v-else-if="item.followType === 1 && userInfoState?.userId !== item.userId">
                                <el-button round class="hidden-sm-and-up" type="primary" :icon="Plus"
                                  @click="handleClickFollow(0, item.userId)" :loading="followBtnLoading">关注</el-button>
                              </template>
                              <template v-else-if="item.followType === 2 && userInfoState?.userId !== item.userId">
                                <el-button round class="hidden-sm-and-up" @click="handleClickFollow(1, item.userId)"
                                  :loading="followBtnLoading">互相关注</el-button>
                              </template>
                            </div>
                          </div>
                          <div class="sub_people_end hidden-xs-only">
                            <template v-if="item.followType === 0 && userInfoState?.userId !== item.userId">
                              <el-button round style="margin:10px 0;" @click="handleClickFollow(1, item.userId)"
                                :loading="followBtnLoading">已关注</el-button>
                            </template>
                            <template v-else-if="item.followType === 1 && userInfoState?.userId !== item.userId">
                              <el-button round style="margin:10px 0;" type="primary" :icon="Plus"
                                @click="handleClickFollow(0, item.userId)" :loading="followBtnLoading">关注</el-button>
                            </template>
                            <template v-else-if="item.followType === 2 && userInfoState?.userId !== item.userId">
                              <el-button round style="margin:10px 0;" @click="handleClickFollow(1, item.userId)"
                                :loading="followBtnLoading">互相关注</el-button>
                            </template>
                          </div>
                        </div>
                        <el-empty description="暂无数据~" v-if="!fansLoading && fansData.data.value <= 0" />
                        <div class="pagination_container">
                          <el-pagination v-model:current-page="fansParams.pageNum"
                            v-model:page-size="fansParams.pageSize" background layout="total, prev, pager, next, jumper"
                            :total="fansData.total.value" v-if="fansData.total.value > 0"
                            @current-change="handleCurrentChange($event, 4)" />
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="关注" name="five">
                    <div class="tab_pane_wrapper" v-loading="followLoading" element-loading-text="正在玩命加载中...">
                      <div class="sub_people_list">
                        <div class="sub_people_item" v-for="item in followData.data.value" :key="item.userId">
                          <div style="display: flex;flex:1;overflow: hidden;align-items: center;">
                            <div class="sub_people_left">
                              <el-avatar :size="50" :src="proxy.$baseImgUrl + item.avatar" class="cursor_class" />
                            </div>
                            <div class="sub_people_right">
                              <p class="sub_people_name text_ellipsis cursor_class">{{ item.nickName }}</p>
                              <p class="sub_people_desc text_ellipsis hidden-xs-only">{{ item.remark }}</p>
                              <template v-if="item.followType === 0 && userInfoState?.userId !== item.userId">
                                <el-button round class="hidden-sm-and-up" @click="handleClickFollow(1, item.userId)"
                                  :loading="followBtnLoading">已关注</el-button>
                              </template>
                              <template v-else-if="item.followType === 1 && userInfoState?.userId !== item.userId">
                                <el-button round class="hidden-sm-and-up" type="primary" :icon="Plus"
                                  @click="handleClickFollow(0, item.userId)" :loading="followBtnLoading">关注</el-button>
                              </template>
                              <template v-else-if="item.followType === 2 && userInfoState?.userId !== item.userId">
                                <el-button round class="hidden-sm-and-up" @click="handleClickFollow(1, item.userId)"
                                  :loading="followBtnLoading">互相关注</el-button>
                              </template>
                            </div>
                          </div>
                          <div class="sub_people_end hidden-xs-only">
                            <template v-if="item.followType === 0 && userInfoState?.userId !== item.userId">
                              <el-button round style="margin:10px 0;" @click="handleClickFollow(1, item.userId)"
                                :loading="followBtnLoading">已关注</el-button>
                            </template>
                            <template v-else-if="item.followType === 1 && userInfoState?.userId !== item.userId">
                              <el-button round style="margin:10px 0;" type="primary" :icon="Plus"
                                @click="handleClickFollow(0, item.userId)" :loading="followBtnLoading">关注</el-button>
                            </template>
                            <template v-else-if="item.followType === 2 && userInfoState?.userId !== item.userId">
                              <el-button round style="margin:10px 0;" @click="handleClickFollow(1, item.userId)"
                                :loading="followBtnLoading">互相关注</el-button>
                            </template>
                          </div>
                        </div>
                        <el-empty description="暂无数据~" v-if="!followLoading && followData.data.value <= 0" />
                        <div class="pagination_container">
                          <el-pagination v-model:current-page="followParams.pageNum"
                            v-model:page-size="followParams.pageSize" background
                            layout="total, prev, pager, next, jumper" :total="followData.total.value"
                            v-if="followData.total.value > 0" @current-change="handleCurrentChange($event, 5)" />
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </el-row>
      </template>
    </layout>
    <Footer />
  </div>
</template>

<script lang="ts" setup>
import Menu from '@/components/Menu/index.vue'
import Layout from '@/components/Layout/index.vue'
import Footer from '@/components/Footer/index.vue'
import Article from '@/components/Article/index.vue'
import Question from '@/components/Question/index.vue'
import File from '@/components/File/index.vue'
import {
  Tickets,
  Plus
} from '@element-plus/icons-vue'
import { onMounted, ref, getCurrentInstance, reactive, toRefs, computed } from 'vue'
import { ElMessage, TabsPaneContext, useId } from 'element-plus'
import { useRoute } from 'vue-router'
import { getUserBlogInfo, getUserFollows, getUserFans, followUser } from '@/api/user'
import { getBlogList } from "@/api/index";
import { getFaqList } from '@/api/faq'
import { getResourceList } from "@/api/download";
import { useStore } from "vuex";
import router from '@/router'
const store = useStore();
const userInfoState = computed(() => store.state.userInfo);
const { proxy } = getCurrentInstance()
const Route = useRoute();
const activeName = ref<any>('first')
const userId = Route.params.id as string
const userBlogInfoData = reactive<any>({
  data: {}
})
// 博客
const blogSearchParams = reactive<any>({
  pageNum: 1,
  pageSize: 10,
})
const blogData = toRefs(reactive<any>({
  data: [],
  total: 0
}))
const blogLoading = ref<boolean>(false)
// 资源
const resourceSearchParams = reactive<any>({
  pageNum: 1,
  pageSize: 10,
})
const resourceData = toRefs(reactive<any>({
  data: [],
  total: 0
}))
const resourceLoading = ref<boolean>(false)
// 问答
const faqSearchParams = reactive<any>({
  pageNum: 1,
  pageSize: 10,
})
const faqData = toRefs(reactive<any>({
  data: [],
  total: 0
}))
const faqLoading = ref<boolean>(false)
const followParams = reactive<any>({
  pageNum: 1,
  pageSize: 10,
})
const followData = toRefs(reactive<any>({
  data: [],
  total: 0
}))
const fansParams = reactive<any>({
  pageNum: 1,
  pageSize: 10,
})
const fansData = toRefs(reactive<any>({
  data: [],
  total: 0
}))
const followBtnLoading = ref<boolean>(false)
const fansLoading = ref<boolean>(false)
const followLoading = ref<boolean>(false)
const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event)
  const { name } = tab.props
  activeName.value = name
  if (activeName.value === 'first') {
    blogSearchParams.pageNum = 1
    getBlogListData()
  } else if (activeName.value === 'second') {
    resourceSearchParams.pageNum = 1
    getResourceListData()
  } else if (activeName.value === 'third') {
    faqSearchParams.pageNum = 1
    getFaqListData()
  } else if (activeName.value === 'four') {
    fansParams.pageNum = 1
    getUserFansData()
  } else if (activeName.value === 'five') {
    followParams.pageNum = 1
    getUserFollowsData()
  }
}
const getUserBlogInfoData = async () => {
  if (!userId) {
    return ElMessage({
      message: '获取用户ID失败',
      type: 'error',
      duration: 2 * 1000
    })
  }
  const { data }: any = await getUserBlogInfo({ userId })
  userBlogInfoData.data = data
}
const getBlogListData = async () => {
  try {
    blogLoading.value = true
    const { rows, total }: any = await getBlogList({
      authorId: userId,
      ...blogSearchParams
    })
    blogData.data.value = rows
    blogData.total.value = total
  } finally {
    blogLoading.value = false
  }
}
// 监听点赞，更新数据
const handleClickArticleLiked = (e: any, name: string) => {
  getBlogListData()
}
const handleCurrentChange = (e: any, num: number) => {
  if (num === 1) {
    blogSearchParams.pageNum = e
    getBlogListData()
  } else if (num === 2) {
    resourceSearchParams.pageNum = e
    getResourceListData()
  } else if (num === 3) {
    faqSearchParams.pageNum = e
    getFaqList()
  } else if (num === 4) {
    fansParams.pageNum = e
    getUserFansData()
  } else if (num === 5) {
    followParams.pageNum = e
    getUserFollowsData()
  }
}
const getResourceListData = async () => {
  try {
    resourceLoading.value = true
    const { rows, total }: any = await getResourceList({
      ...resourceSearchParams,
      userId
    })
    resourceData.data.value = rows
    resourceData.total.value = total
  } finally {
    resourceLoading.value = false
  }
}
const getFaqListData = async () => {
  try {
    faqLoading.value = true
    const { rows, total }: any = await getFaqList({
      ...faqSearchParams,
      userId
    })
    faqData.data.value = rows
    faqData.total.value = total
  } finally {
    faqLoading.value = false
  }
}
const getUserFansData = async () => {
  try {
    fansLoading.value = true
    const { rows, total }: any = await getUserFans({
      userId,
      ...fansParams
    })
    fansData.data.value = rows
    fansData.total.value = total
  } finally {
    fansLoading.value = false
  }

}
const getUserFollowsData = async () => {
  try {
    followLoading.value = true
    const { rows, total }: any = await getUserFollows({
      userId,
      ...followParams
    })
    followData.data.value = rows
    followData.total.value = total
  } finally {
    followLoading.value = false
  }
}
// 关注
const handleClickFollow = async (status: number, followedUserId: number) => {
  try {
    followBtnLoading.value = true
    const res: any = await followUser({
      followedUserId,
      status
    })
    if (res) {
      if (status === 1) {
        ElMessage({
          message: '取关成功',
          type: 'success',
          duration: 2 * 1000
        })
      } else {
        ElMessage({
          message: '关注成功',
          type: 'success',
          duration: 2 * 1000
        })
      }
      await getUserBlogInfoData()
      getUserFansData()
      getUserFollowsData()
    }
  } finally {
    followBtnLoading.value = false
  }
}
const handleClickToDetail = (id: number) => {
  const url = router.resolve({
    name: 'user-blog',
    params: {
      id
    }
  })
  window.open(url.href, '_blank')
}
onMounted(() => {
  getUserBlogInfoData()
  getBlogListData()
})
</script>

<style scoped lang="scss">
// @import '@/assets/style/reset.scss';
@import './index.scss';
</style>
